<template>
  <n-form-item label="应用名称" path="app_name">
    <n-input v-model:value="formItem.app_name"/>
  </n-form-item>
  <n-form-item label="AppId" path="app_id">
    <n-input v-model:value="formItem.app_id" disabled style="width: 310px;margin-right: 8px"/>
    <n-tag :bordered="false" type="error" size="large">
      系统自动生成，不允许修改
    </n-tag>
  </n-form-item>
  <n-form-item label="AppSecret" path="app_secret">
    <n-input-group>
      <n-input v-model:value="formItem.app_secret" disabled style="width: 310px;"/>
      <n-button @click="refresh">
        <template #icon>
          <n-icon>
            <component :is="'ionicons5-RefreshOutline'"></component>
          </n-icon>
        </template>
      </n-button>
    </n-input-group>
  </n-form-item>
  <n-form-item label="应用描述" path="app_info">
    <n-input v-model:value="formItem.app_info" type="textarea"/>
  </n-form-item>
  <n-form-item label="接口访问" path="app_api">
    <n-checkbox-group v-model:value="formItem.app_api">
      <n-space item-style="display: flex;">
        <n-checkbox v-for="group in groupList.info" :key="group.id" :value="group.id + ''" :label="group.name"/>
      </n-space>
    </n-checkbox-group>
  </n-form-item>
</template>
<script lang="ts" setup>
import {ref, watch} from "vue"
import {refreshAppSecretApi} from "@/api/open/app"

const props = defineProps({
  formItem: {
    type: Object,
    required: true
  },
  groupList: {
    type: Object,
    required: true
  },
})
const emits = defineEmits(["update:formItem"])
const formItem = ref(props.formItem)

const refresh = () => {
  refreshAppSecretApi().then(res => {
    formItem.value.app_secret = res.data.app_secret
  })
}

watch(formItem, () => {
  emits("update:formItem", formItem.value)
})

</script>
